<template>
  <BaseLayout title="菜单管理" @query="init" @reset="reset">
    <template #query>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="标题">
          <el-input placeholder="请输入标题" v-model="queryForm.menuTitle"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #button>
      <el-button type="primary" @click="addMenu('0',2)">新增</el-button>
    </template>
    <template #table>
      <el-table :default-expand-all="isDefaultExpand" row-key="id" v-loading="loading" :data="data" height="100%" class="w-full">
        <el-table-column prop="title" label="菜单标题" align="left" header-align="left" width="220"></el-table-column>
        <el-table-column prop="icon" label="菜单图标" align="center" header-align="center" width="80">
          <template #default="scope">
            <div class="flex justify-center">
              <BaseIcon :icon="scope.row.icon"></BaseIcon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="menuName" label="菜单名称" align="center" header-align="center"></el-table-column>
        <el-table-column prop="type" label="类型" align="center" header-align="center">
          <template #default="scope">
            <BaseTag :value="scope.row.type" :dict="typeOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column prop="authFlag" label="权限标识" align="center" header-align="center"></el-table-column>
        <el-table-column prop="filePath" label="文件路径" align="center" header-align="center"></el-table-column>
        <el-table-column prop="requestPath" label="请求路径" align="center" header-align="center"></el-table-column>
        <el-table-column prop="menuType" label="菜单类型" align="center" header-align="center">
          <template #default="scope">
            <BaseTag :value="scope.row.menuType" :dict="menuTypeOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center" header-align="center">
          <template #default="scope">
            <el-button link type="primary" @click="addMenu(scope.row.menuId,scope.row.type)">新增子节点</el-button>
            <el-button link type="primary" @click="editMenu(scope.row.menuId)">修改</el-button>
            <el-button link type="danger" @click="delMenu(scope.row.menuId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <AddOrUpdateMenu @load="init" ref="addOrUpdateMenuRef"></AddOrUpdateMenu>
    </template>
  </BaseLayout>
</template>

<script setup lang="ts">
import AddOrUpdateMenu from './AddOrUpdateMenu.vue'
import {nextTick, onMounted, reactive, ref} from "vue";
import {deleteMenuByMenuId, listMenuAuthTree, selectMenuByMenuId} from "/@/api/system/MenuApi";
import {messageBox} from "/@/utils/BjxUtils";
import {DictDataModel} from "/@/api/system/model/DictModel";
import {MenuQueryModel, MenuModel} from "/@/api/system/model/MenuModel";
import {useDictStore} from "/@/store/modules/dict";

const enableOptions = ref<DictDataModel[]>([])
const data = ref<MenuModel[]>([])
const addOrUpdateMenuRef = ref()
const loading = ref(false)
const typeOptions = ref()
const isDefaultExpand = ref(false)
const menuTypeOptions = ref()
const queryForm = reactive<MenuQueryModel>({
  menuTitle: ''
})
const init = async () => {
  loading.value = true
  let res = await listMenuAuthTree(() => {
    loading.value = false
  })
  let menuList = [] as MenuModel[];
  if (queryForm.menuTitle) {
    //递归过滤菜单
    menuList = menuFilter(res, queryForm.menuTitle)
    isDefaultExpand.value = true
  } else {
    menuList = res;
    isDefaultExpand.value = false
  }
  data.value = menuList
}
/**
 * 新增菜单
 */
const addMenu = (menuId: string, type: number) => {
  addOrUpdateMenuRef.value.init("新增菜单", {pid: menuId, type: type}, data.value)
}
/**
 * 修改菜单
 */
const editMenu = async (menuId: string) => {
  loading.value = true
  let res = await selectMenuByMenuId(menuId)
  addOrUpdateMenuRef.value.init("修改菜单", res, data.value)
  loading.value = false
}
/**
 * 删除菜单
 */
const delMenu = async (menuId: string) => {
  messageBox("您确定要删除这个菜单吗?", async () => {
    loading.value = true
    await deleteMenuByMenuId(menuId, () => {
      loading.value = false
    })
    init()
  })

}
/**
 * 重置
 */
const reset = () => {
  queryForm.menuTitle = '',
      queryForm.menuName = ''
  init()
}
/**
 * 过滤菜单
 * @param menus
 * @param menuTitle
 */
const menuFilter = (menus: MenuModel[], menuTitle: string): MenuModel[] => {
  const children = [] as MenuModel[]
  if (menus && menus.length > 0) {
    for (let i = 0; i < menus.length; i++) {
      let bol = false
      const menu = menus[i]
      if (menu.title.indexOf(menuTitle) != -1) {
        bol = true
      }
      let childrenFilter = menuFilter(menu.children, menuTitle)
      if (childrenFilter && childrenFilter.length > 0) {
        bol = true
        menu.children = childrenFilter;
      }
      if (bol) {
        children.push(menu)
      }
    }
  }
  return children;
}
onMounted(async () => {
  let dictStore = useDictStore();
  enableOptions.value = await dictStore.getDict('enable_dict')
  typeOptions.value = await dictStore.getDict('auth_type_dict')
  menuTypeOptions.value = await dictStore.getDict('menu_type_dict')
  nextTick(() => {
    init()
  })

})
</script>

<style scoped>

</style>